<template>
  <el-tabs
    v-model="curActive"
    :type="type"
    @tab-click="handleChange"
  >
    <el-tab-pane
      v-for="(item,index) in tabList"
      :key="index"
      :label="item.label"
      :name="item.value"
    />
  </el-tabs>
</template>

<script>
  export default {
    props: {
      tabList: {
        type: Array,
        default: () => []
      },
      active: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        curActive: ''
      }
    },
    watch: {
      active(val) {
        this.curActive = val
      }
    },
    mounted() {
      this.curActive = this.active
    },
    methods: {
      handleChange(val) {
        this.curActive = val.name
        this.$emit('change', val.name)
      }
    }
  }
</script>

<style scoped lang="scss">
/deep/.el-tabs__active-bar {
  min-width: 56px !important;
}
</style>
